@()

<script>
	$(function(){
	    $("#main_menu").kendoMenu();

	    $("#application").kendoDropDownList({
	    	value: @helpers.ClientRequest.getCurrent.appId,
	    	change: kpi.headerChange
	    });

        $("#market").kendoDropDownList({
            value: @helpers.ClientRequest.getCurrent.marketKey,
            change: kpi.headerChange
        });

        $("#device").kendoDropDownList({
        	value: @helpers.ClientRequest.getCurrent.appId,
        	change: kpi.headerChange
        });
	    
	});
</script>

<header id="header">
   <!--<h1 class="col-sm-3 hidden-sm">KPI</h1> -->

    <div id="header-wrap">
		<label class="section">
			<div class="description">Game</div>
			<select id="application" class="search" name="app">
                @for(item <- models.common.Application.getAll()) {
				  <option value="@item.appId">@item.name</option>
				} 
            </select>
		</label>

        <label class="section">
            <div class="description">Market</div>
            <select id="market" class="search" name="market">
           		@for(item <- models.common.Market.getAll()) {
				  <option value="@item.marketKey">@item.name</option>
				} 
            </select>
        </label>

         <label class="section">
             <div class="description">Device</div>
             <select id="device">
             	<option>Default</option>
              	<option>Bootstrap</option>
             </select>
         </label>
    </div>
</header>

<div style="clear:both;"></div>

<ul id="main_menu">
 	<li><a href="@helpers.ClientRequest.getUrlWithParams(controllers.monitor.routes.ScheduleController.index())">SCHEDULE</a></li>
 	<li><a href="@helpers.ClientRequest.getUrlWithParams(controllers.routes.ReportController.index())">REPORT</a></li>
</ul> 
